<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            height: 500px;
            width: 500px;
            margin: 100px auto;
        }

        .top {
            height: 80px;
            display: flex;
            justify-content: space-between;
        }

        .top .biaoti {
            font-size: 20px;
            font-weight: 700;
            color: black;
            line-height: 80px;
        }

        .top .biaoti span:nth-child(2) {
            font-size: 20px;
            font-weight: 700;
            color: lightgray;
            line-height: 80px;
            margin-left: 5px;
        }

        .top .change {
            font-size: 14px;
            font-weight: 700;
            color: gray;
            border: none;
            background: none;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }

        ul li {
            margin-bottom: 10px;
        }

        ul li span {
            color: grey;
            margin-right: 5px;
        }

        ul li:nth-child(1)>span {
            color: red;
        }

        ul li:nth-child(2)>span {
            color: rgb(255, 38, 0);
        }

        ul li:nth-child(3)>span {
            color: rgb(255, 89, 0);
        }

        ul li:nth-child(4)>span {
            color: rgba(255, 153, 0, 0.932);
        }

        li a {
            font-size: 16px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <div class="biaoti"><span>百度热搜</span><span>&gt;</span></div>
            <button class="change">换一换</button>
        </div>
        <ul>

        </ul>
    </div>
</body>

</html>
<script>
    var list = [
        { id: 1, word: '继续为各国来华投资提供便利' },
        { id: 2, word: '乌市一方舱有卖淫嫖娼？警方回应' },
        { id: 3, word: '红月亮”遇上月掩天王星' },
        { id: 4, word: '前10个月进出口同比增长9.5%' },
        { id: 5, word: '湖南一中学多名学生感染 校长被免职' },
        { id: 6, word: '俄罗斯制裁74家外国公司' },
        { id: 7, word: '深圳楼市双11也打折' },
        { id: 8, word: '钟琰琰再度成为中国首富' },
        { id: 9, word: '两名15岁学生被清华录取硕博连读' },
        { id: 10, word: '首尔地铁人群混乱 有人喊喘不过气了' },
    ]

    // function render() {
    //     var lis = document.querySelectorAll('ul>li')
    //     lis.innerHTML = goodlist.map((item) => {
    //         return ` <ul>
    //         <li><span></span>
    //             <a href="#" class="poin">${item.word}</a>
    //         </li>

    //     </ul>`
    //     }).join('')
    // }
    // render()
    var news = document.querySelector('ul')
    var str = ``
    for (var i = 0; i < list.length; i++) {
        str += `
          <li> 
            <span> ${list[i].id}</span>
            <a href="#">${list[i].word}</a>
                </li>
            `
            news.innerHTML = str
    }
</script>